<template>
  <echartsFlowSale :pop='pop'  ref="echartsRef" :option="option" :loading="loading" :loadingText="loadingText" >
    <slot></slot>
  </echartsFlowSale>
</template>
<style lang="scss">
</style>
<script>
  let moment = require("moment");
  import echartsFlowSale from "@/components/real-time/real-time-module/common/echartsFlowSale";
  export default {
    components: {
      echartsFlowSale:echartsFlowSale
    },
    props:{
      GetData:{},
      isdemo:{
        type:Boolean,
        default:function(){
          return false
        }
      }
    },
    data(){
      return {
        pop:{
          title: "会员男女年龄比例",							//报表标题
          helphint:[
            {title:"会员男女年龄比例",text:""},				//第一条信息为提示标题 不给text
          ]
        },
        realData:{
          company_ids:'',//企业id
          case_ids:'',//案场id
          idsType:0,//企业或案场标记：0：为只选择了企业id，1：为选择了案场id
          start_day:moment(new Date()).format("YYYY-MM-DD"),
          end_day:moment(new Date()).format("YYYY-MM-DD"),
        },
        option:{
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          toolbox:{
            right: "30",
            top: "0",
            feature: {
              saveAsImage: { show: true }
            }
          },
          legend:{
            show:false
          },
          series:[],
        },
        loading:false,
        loadingText:'加载中...',
        start_hm:'00:00',
        end_hm:'23:59',
        global:null,
        ageList:[],
        maleColor:['#b4c9fe','#6e94f7','#315fe8','#1e37d9','#08019f'],
        femaleColor:['#fbe795', '#ffe270', '#f5bf60', '#e9a939', '#e09109'],
        shake:false
      }
    },
    created() {},
    mounted() {
      if(this.isdemo)
      {
        this.option.series = [
          {
            name: '男女比例',
            type: 'pie',
            data: [
              {
                name: '男',
                value: 20000,
                itemStyle: {
                  color: '#5481ff',
                }
              },
              {
                name: '女',
                value: 20000,
                itemStyle: {
                  color: '#f5bf60',
                }
              }
            ],
            label: {
              position:'inner',
              formatter: '{b}: {c} \n({d}%)'
            },
            itemStyle: {
              borderWidth: 0,
            },
            radius: [0,'30%'],
            center: ['50%', '50%'],
            clockwise: true,
            animation: false,
          },
          {
            type: 'pie',
            name: '年龄段',
            data:[
              {
                name: '20岁以下(男)',
                value: 4000,
                itemStyle: {
                  color: '#b4c9fe',
                }
              },
              {
                name: '21-30岁(男)',
                value: 4000,
                itemStyle: {
                  color: '#6e94f7',
                }
              },
              {
                name: '31-40岁(男)',
                value: 4000,
                itemStyle: {
                  color: '#315fe8',
                }
              },
              {
                name: '41-50岁(男)',
                value: 4000,
                itemStyle: {
                  color: '#1e37d9',
                }
              },
              {
                name: '50岁以上(男)',
                value: 4000,
                itemStyle: {
                  color: '#08019f',
                }
              },
              {
                name: '50岁以上(女)',
                value: 4000,
                itemStyle: {
                  color: '#e09109',
                }
              },
              {
                name: '41-50岁(女)',
                value: 4000,
                itemStyle: {
                  color: '#e9a939',
                }
              },
              {
                name: '31-40岁(女)',
                value: 4000,
                itemStyle: {
                  color: '#f5bf60',
                }
              },
              {
                name: '21-30岁(女)',
                value: 4000,
                itemStyle: {
                  color: '#ffe270',
                }
              },
              {
                name: '20岁以下(女)',
                value: 4000,
                itemStyle: {
                  color: '#fbe795',
                }
              }
            ],
            label: {
              formatter: '{b}:\n {c} ({d}%)'
            },
            radius: ['45%','60%'],
            center: ['50%', '50%'],
            lableLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: true
              }
            },
            clockwise: true,
            itemStyle: {
              borderWidth: 0,
            },
          }

        ]
        this.$refs.echartsRef.setOption();
        this.loading=false;
      }
    },
    beforeDestroy()
    {
    },
    methods: {
      getData(){
        let ids = this.realData.idsType ? this.realData.case_ids : this.realData.company_ids;
        ids = ids.split(',');
        let tags=0;
        if(this.global.type=='chain')
        {
          tags=2;
        }
        else if(this.global.type=='mall')
        {
          tags=1;
        }
        let group_type=this.realData.idsType ?'case':'company';
        let url = '/sys/face_report/distribution_sum?group_type='+group_type+'&tags=' + tags +
          '&indicator_key=face_member_enters&start_day=' + this.realData.start_day + '&end_day=' + this.realData.end_day +
          '&start_hm=' + this.start_hm + '&end_hm=' + this.end_hm;
        let params = {
          org_id_list: ids,
          org_type: this.realData.idsType + 1
        }
        this.$api.post(url,params)//案场分时报表(根据企业ID数组或案场ID数组)
        .then(data => {
          if(data == '10001'){
            this.$refs.echartsRef.setOption(true);
            this.loadingText = '无该指标权限';
            this.shake = false
            return
          }
          if (data&&data.data.sum_list&&data.data.sum_list.length) {
            let _data = data.data;
            let sum_list = _data.sum_list[0] || []
            let sumData = {
              y_name:'会员',
              key:'face_member_enters',
              male_enters:[],//男性总人数
              female_enters:[],//女性总人数
              male_enters_list:[],//男性年龄层数组
              female_enters_list:[],//女性年龄层数组
            }
            sumData.male_enters.push(sum_list.male_enters)
            sumData.female_enters.push(sum_list.female_enters)
            sumData.male_enters_list.push(sum_list.male_enters_list)
            sumData.female_enters_list.push(sum_list.female_enters_list)
            this.option.series = [];
            let sexData = {
              name: '男女比例',
              type: 'pie',
              data: [
                {
                  name: '男',
                  value: sumData.male_enters[0],
                  itemStyle: {
                    color: '#5481ff',
                  }
                },
                {
                  name: '女',
                  value: sumData.female_enters[0],
                  itemStyle: {
                    color: '#f5bf60',
                  }
                }
              ],
              label: {
                position:'inner',
                formatter: '{b}: {c} \n({d}%)'
              },
              itemStyle: {
                borderWidth: 0,
              },
              radius: [0,'30%'],
              center: ['50%', '50%'],
              clockwise: true,
              animation: false,
            }
            this.option.series.push(sexData);

            let ageList = {
              type: 'pie',
              name: '年龄段',
              data:[],
              label: {
                formatter: '{b}:\n {c} ({d}%)'
              },
              radius: ['45%','60%'],
              center: ['50%', '50%'],
              lableLine: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              clockwise: true,
              itemStyle: {
                borderWidth: 0,
              },
            }
            //push男性年龄层数据
            for(let i in this.ageList){
              let maleObj = {
                name: this.ageList[i].info + '(男)',
                value: sumData.male_enters_list[0][i],
                itemStyle: {
                  color: this.maleColor[i],
                }
              }
              ageList.data.push(maleObj)
            }
            //push女性年龄层数据
            for(let i = this.ageList.length; i > 0 ; --i){
              let femaleObj = {
                name: this.ageList[i-1].info + '(女)',
                value: sumData.female_enters_list[0][i-1],
                itemStyle: {
                  color: this.femaleColor[i-1],
                }
              }
              ageList.data.push(femaleObj)
            }
            this.option.series.push(ageList);

            this.$nextTick(() => {
              this.$refs.echartsRef.setOption();
              this.loading = false;
            })
          } else{
            this.loadingText = '无数据';
            this.$nextTick(()=>{
              this.$refs.echartsRef.setOption(true);
            })
          }
          this.shake = false
        })
        .catch(err=>{
           console.log(err);
          this.loadingText = '无数据';
          this.shake = false
          this.$nextTick(()=>{
            this.$refs.echartsRef.setOption(true);
          })
        })
      },
    },
    watch: {
      GetData:{
        handler(val){
          if(this.shake && val.index != 0){
            return
          }
          if(val){
            if(!val.ageList && val.ageList.length == 0){
              return
            }
            this.ageList = val.ageList;
            this.realData = val.realHeaderData;
            this.global = val.global;
            this.loading = true;
            this.shake = true
            if(!this.realData.company_ids.length){
              this.$refs.echartsRef.setOption(true);
              this.loadingText = '无数据';
              this.shake = false
              return
            }else{
              this.loadingText = '加载中...';
              this.getData();
            }
          }
        },
        deep:true
      }
    },

  };
</script>
